<script setup>
  // 1. 解析出url参数id和planTime的值
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, computed } from 'vue'
  import taskApi from '@/apis/task.js'
  const taskId = ref('')
  const planATime = ref('')
  const desc = ref('') //延迟原因描述
  onLoad(({ id, planTime }) => {
    taskId.value = id
    planATime.value = planTime
  })

  // 2. 收集用户在表单上填写的数据

  // 2.1 收集延迟时间
  const delayTime = ref('')
  function onTimeChange(ev) {
    // console.log(ev.detail.value)
    const [date] = planATime.value.split(' ')
    delayTime.value = date + ' ' + ev.detail.value // 时:分
    console.log(delayTime.value)
  }

  // 统计延迟原因的长度
  const descLength = computed(() => {
    return desc.value.length
  })

  // 控制提交按钮是否可被点击
  const isSubmit = computed(() => {
    // 如果延迟原因有填写并且长度在50以内(包含50)就可以提交
    let isDesc = desc.value.length > 0 && desc.value.length <= 50

    let oldTime = new Date(planATime.value)
    let nowTime = new Date(delayTime.value)
    let mins = nowTime - oldTime //获得了两个时间差的毫秒数

    let isTimeout = mins > 7200 * 1000

    return isDesc && !isTimeout
  })

  // 使用计算属性从planATime解出 时:分 数据
  const oldTime = computed(() => {
    // 2024-7-26 9:50:00
    let [date, time] = planATime.value.split(' ')
    let [hour, min] = time.split(':')
    return `${hour}:${min}`
  })

  // 使用计算属性计算当前用户选择的延迟时间是否超过了原出发时间2小时
  const isTimeout = computed(() => {
    // 用现在的时间 - 原来的时间 > 7200 * 1000
    // 1. 获取现在的时间的毫秒
    let oldTime = new Date(planATime.value)
    let nowTime = new Date(delayTime.value)
    let mins = nowTime - oldTime //获得了两个时间差的毫秒数
    return mins > 7200 * 1000
  })

  // 3. 将表单数据提交给服务器
  async function onSubmitData() {
    let formData = {
      id: taskId.value,
      delayTime: delayTime.value,
      delayReason: desc.value,
    }

    try {
      let { code, msg } = await taskApi.delay(formData)
      if (code !== 200) {
        return uni.utils.toast(msg)
      }

      uni.switchTab({
        url: '/pages/task/index',
      })
    } catch (err) {
      uni.utils.toast('网络请求异常')
    }
  }
</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :right-text="planATime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            :value="oldTime"
            class="time-picker"
            mode="time"
            @change="onTimeChange"
          >
            <text :class="{ error: isTimeout }">{{
              delayTime || '不可超过2个小时'
            }}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              class="textarea"
              v-model="desc"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text :class="{ error: descLength > 50 }" class="words-count"
              >{{ descLength }}/50</text
            >
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button :disabled="!isSubmit" class="button" @click="onSubmitData">
            提交
          </button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
